<template>
	<div class="contact">
		<mt-header fixed title ="通讯录"></mt-header>
		<mt-search
			  v-model="value"
			  cancel-text="取消"
			  placeholder="搜索">
		</mt-search>
		<div class="personlist">
			<mt-index-list>
			  <mt-index-section index="A">
			    <mt-cell title="艾局长"></mt-cell>
			    <mt-cell title="艾科长"></mt-cell>
			    <mt-cell title="爱可袁"></mt-cell>
			  </mt-index-section>
			  <mt-index-section index="B">
			    <mt-cell title="巴啦啦"></mt-cell>
			    <mt-cell title="吧噢噢"></mt-cell>
			  </mt-index-section>
			  <mt-index-section index="C">
			    <mt-cell title="陈局长"></mt-cell>
			    <mt-cell title="陈科长"></mt-cell>
			  </mt-index-section>
			  <mt-index-section index="D">
			    <mt-cell title="邓局长"></mt-cell>
			    <mt-cell title="待科长"></mt-cell>
			  </mt-index-section>
			  
			  <mt-index-section index="F">
			    <mt-cell title="房局长"></mt-cell>
			    <mt-cell title="放科长"></mt-cell>
			    <mt-cell title="方科长"></mt-cell>
			  </mt-index-section>
			  <mt-index-section index="H">
			    <mt-cell title="何局长"></mt-cell>
			    <mt-cell title="黄科长"></mt-cell>
			    <mt-cell title="胡科长"></mt-cell>
			  </mt-index-section>
			  <mt-index-section index="W">
			    <mt-cell title="W局长"></mt-cell>
			    <mt-cell title="王科长"></mt-cell>
			    <mt-cell title="往科长"></mt-cell>
			  </mt-index-section>
			  ...
			  <mt-index-section index="Z">
			    <mt-cell title="Zack"></mt-cell>
			    <mt-cell title="Zane"></mt-cell>
			  </mt-index-section>
			</mt-index-list>
			
			 
		</div>
		<footerGuide></footerGuide> 
	</div>
</template>
<script type="text/javascript">
	import { Search } from 'mint-ui';
	import { IndexList, IndexSection } from 'mint-ui';
	import footerGuide from '@/components/common/footer.vue';
	export default{
		data(){
			return{
				value:'',
				popupVisible:''
			}	
		},
		components:{footerGuide},
	}
</script>
<style lang="less">
	.contact{
		text-align: left;
		.mint-search{
			height: 100%;
		}
		.personlist{
			
		}
	}
</style>